<template>
  <div class="chart-container">
    <div class="chart-item" @click="toPreview('bar')">
      <cc-bar-chart :extend="barExtend"></cc-bar-chart>
    </div>
    <div class="chart-item" @click="toPreview('multi-bar')">
      <cc-bar-chart :dataset="multiBar" :extend="multiBarExtend" ref="multiBar"></cc-bar-chart>
    </div>
    <div class="chart-item" @click="toPreview('line')">
      <cc-line-chart :extend="lineExtend"></cc-line-chart>
    </div>

    <div class="chart-item" @click="toPreview('pie')">
      <cc-pie-chart></cc-pie-chart>
    </div>
    <div class="chart-item" @click="toPreview('ring')">
      <cc-ring-chart></cc-ring-chart>
    </div>
    <div class="chart-item" @click="toPreview('liquid')">
      <cc-liquid-chart></cc-liquid-chart>
    </div>
  </div>
</template>

<script>

export default {
  name: 'Home',
  data() {
    return {
      multiBar: [
        ['姓名', 'series01', 'series02'],
        ['张三', '10', '30'],
        ['李四', '20', '20'],
        ['王五', '30', '10'],
      ]
    }
  },
  methods: {
    toPreview(chart) {
      this.$router.push(`preview/${chart}`)
    },
  },
  computed: {
    barExtend() {
      return this.$store.state.bar;
    },
    multiBarExtend() {
      return this.$store.state.multiBar;
    },
    lineExtend() {
      return this.$store.state.line;
    },
  }
}
</script>

<style scoped>

.chart-container {
  display: flex;
  justify-content: space-around;
  flex-wrap: wrap;
}

.chart-container .chart-item {
  width: 500px;
  height: 400px;
  border: 1px solid #ccc;
  flex-shrink: 0;
  margin-top: 20px;
}


</style>


